<template>
    <div>
      <el-divider />
      <p style="font-weight: 500">发退药记录管理</p>
      <el-divider />
      <el-row>
        <el-col :span="24">
          <el-form :inline="true" :model="recordsData" class="demo-form-inline">
            <el-form-item label="单号">
              <el-input v-model="recordsData.id" placeholder="请输入" clearable />
            </el-form-item>
  
            <el-form-item label="选择日期">
              <el-date-picker v-model="recordsData.date" type="date" clearable />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handlerSearch">查询</el-button>
              <el-button type="primary">最近</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="操作类型:">
            <el-button-group>
              <el-button plain @click="giveMedicineRecords">发药</el-button>
              <el-button plain @click="backMedicineRecords">退药</el-button>
              <el-button plain @click="allMedicineRecords">全部</el-button>
            </el-button-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table :data="historyTableData" style="width: 100%; margin-top: 20px">
            <el-table-column prop="id" label="药单号" />
            <el-table-column prop="register.realName" label="患者姓名" />
            <el-table-column prop="drugInfo.drugName" label="药品名称" />
            <el-table-column prop="date" label="日期" />
            <el-table-column prop="employee.realname" label="主诊医生" />
            <el-table-column prop="number" label="数量" />
            <el-table-column prop="cost" label="费用" />
            <el-table-column prop="operatorState" label="状态" />
            
            <el-table-column>
              <template #default="scope">
                <el-button type="primary"> 详情 </el-button>
              </template>
            </el-table-column>
          </el-table>
  
          <el-pagination
            @current-change="handleCurrentChange"
            style="margin-top: 15px"
            layout="prev, pager, next ,total,jumper,sizes"
            v-model:currentPage="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[5, 10, 15]"
            :total="total"
          />
        </el-col>
      </el-row>
    </div>
  </template>
  <script setup>
  import axios from "axios";
  import { reactive,ref } from "vue";
  let currentPage = ref(1)
  let pageSize  =ref(5)
  let total =ref(100);
  let operatorState=ref('')
  //查找发药的方法
  const giveMedicineRecords=()=>{
    operatorState.value = "已发药"
    handlerSearch();
  }
  //查找退药的方法
  const backMedicineRecords=()=>{
   operatorState.value = "已退药"
   handlerSearch();
  }
  const allMedicineRecords=()=>{
   operatorState.value = ""
   handlerSearch();
  }
  
  //分页的方法
  const handleCurrentChange =()=>{
     console.log('-------',currentPage.value,pageSize.value)
     handlerSearch();
  }
  //表格的数据
  let historyTableData=ref([])
  
  const recordsData = reactive({
    id: "",
    date: "",
  });
  
  //默认查询已发药的交易记录的方法
  const handlerSearch = () => {
    
    axios
      .post("/drugstore/api/records/getRecordsByProperty", {
        ...recordsData,
        pageSize: pageSize.value,
        currentPage: currentPage.value,
        operatorState:operatorState.value
      })
      .then((resp) => {
        console.log(resp.data.results.list);
        historyTableData.value=resp.data.results.list
        total.value = resp.data.results.total;
      })
      .catch((e) => {
        console.log(e);
      });
  };
  
  handlerSearch();
  </script>
  <style scoped></style>
  